import React from 'react';
import Mybutton from './myButton'
class MyList extends React.Component {
  fn = (id) => {
    console.log(666)
    this.props.onDel(id)
  }
  render() {
    // children : string  undefined  {}   []
    let { data = [], render } = this.props;
    console.log(this.props.children)
    return <div className=''>
      {/* <ul>
        {
          data.map(item => <li key={item.id}>
            {this.props.children}
            {item.val}
            <Mybutton onClick={this.fn.bind(this, item.id)}>X</Mybutton>
          </li>)
        }
      </ul> */}
      <ul>
        {
          data.map(item => {
            return <li key={item.id}>{
              render ? render(item) :
                <>
                  {item.val}
                  <Mybutton onClick={this.fn.bind(this, item.id)}>X</Mybutton></>
            }</li>
          })
        }
      </ul>
    </div>;
  }
}
export default MyList